<template>
  <div>
    <div style="margin-top: 0.2rem;">
      <ul class="complaint-list">
        <li @click="handleCheck(idx)" class="flex flex-space-between" :class="[index == idx? 'active': '']" v-for="(item, idx) in tag" :key="idx">
          {{item.label}}
          <i class="icon icon-checkall" v-if="index == idx"></i>
        </li>
      </ul>
    </div>
    <div class="notice-cell">
      {{tag[index].des || ''}}
    </div>
    <div style="position: fixed; bottom: 0.3rem; left : 0.2rem ;right: 0.2rem;">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="handleConfirm">确认</x-button>
    </div>
  </div>

</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  export default{
    components: {
      PubHeader
    },
    created() {
      // if(!this.$store.state.userInfo.uid) {
      //   this.$router.push({path: '/logout'})
      // }
      // if(this.$store.state.userInfo.service_id) {
      //   this.$router.push('/')
      // }
    },
    data() {
      return {
        loading: false,
        tag: [{
          value: 6,
          label: '同城专车',
          des: '专业和项目性同城配送公司注册入口，如商超配送、仓配、家居一体化，多点配送等专业和项目性用车，真实货源，采取筛选货源极速投标模式。'
        }, {
          value: 7,
          label: '零担专线',
          des: '各城际中小零担专线公司和全网零担公司如德邦、安能等注册入口，真实货源，采取筛选货源极速投标模式。'
        }, {
          value: 8,
          label: '城际整车',
          des: '各整车物流公司、货运信息部、货运代理等整车物流公司注册入口，真实货源，采取筛选货源极速投标，智能调度模式。'
        }],
        index: 0,
        service: 6,
      }
    },
    methods: {
      handleCheck(index) {
        this.index = index
        this.service = this.tag[index].value
      },
      handleConfirm() {
        this.loading = true
        this.$http.post($config.host + '/api/Service/addService', qs.stringify({
          service: this.service,
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token
        })).then((res) => {
          const { code, msg } = res.data
          if(code == '1') {
            let userInfo = this.$store.state.userInfo
            userInfo.service_id = this.service
            this.$store.commit('setUserInfo', userInfo)
            //将登录数据保存在localStorage中
            window.localStorage.user = JSON.stringify(userInfo)

            this.$vux.confirm.show({
              title: '<i class="icon icon-gantanhao"></i>',
              content: '您还未完成企业认证，马上去认证？',
              confirmText: '去认证',
              cancelText: '跳过',
              onConfirm: () => {
                this.$router.push({path: '/user/companyIdentifying'})
              },
              onCancel: () => {
                this.$router.push({path: '/'})
              }
            })
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.loading = false
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
          this.loading = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      }
    }
  }
</script>

<style scoped>
  .complaint-list li{
    height: 0.8rem;
    line-height: 0.8rem;
    background: #fff;
    margin-bottom: 0.15rem;
    padding: 0rem 0.2rem;
    border:1px solid #FFFFFF;
  }
  .complaint-list li.active{
    border-color: #f3532c;
  }
  .complaint-list .icon{
    color: #f3532c;
  }
  .weui-cell{
    height: inherit !important;
  }
</style>
